<template>
    <div class="chart-wrapper" v-loading="loading">
        <BaseChart v-if="chartOption" ref="baseChartRef" height="100%" width="100%" :options="chartOption" />
    </div>
</template>

<script setup>
import { ref, watch, shallowRef, onMounted } from 'vue'
import { useReportStore } from '@/stores/report'
import { useI18n } from 'vue-i18n'
import BaseChart from '@/components/chart/BaseChart.vue'
import { formatDate } from '@/utils/date'
import { useMeterStore } from '@/stores/meter'
const loading = ref(false)
const { t } = useI18n()
const reportStore = useReportStore()
const baseChartRef = ref(null)

let props = defineProps({
    chartType: {
        type: String,
        default: 'bar'
    },
    meterType: {
        type: String,
        default: null
    }
})

const formatChartData = (data) => {
    if (!props.meterType) {
        data = data.data
    }
    if (!data.length) return []
    return data.map(item => ({
        time: formatDate(item.start_time, 'HH:mm'),
        value: Number(item.Value || 0).toFixed(2)
    }))
}

const chartOption = shallowRef({})

watch(() => [reportStore.getReportDataList('daily'), reportStore.getReportDataList('daily', true)], () => {
    if (props.meterType) return
    const currentData = reportStore.getReportDataList('daily', false)
    const previousData = reportStore.getReportDataList('daily', true)
    setChartOption(currentData, previousData)
})

watch([() => props.meterType, () => props.chartType], async () => {
    const currentData = ref(null)
    const previousData = ref(null)

    if (props.meterType) {
        useMeterStore().setCurrentMeter(null)
        let resArr = await Promise.all([
            reportStore.fetchReportData('daily', false, false),
            reportStore.fetchReportData('daily', true, false)
        ])
        currentData.value = resArr[0]
        previousData.value = resArr[1]
    } else {
        currentData.value = reportStore.getReportDataList('daily')
        previousData.value = reportStore.getReportDataList('daily', true)
    }
    setChartOption(currentData.value, previousData.value)
}, { immediate: true })

function setChartOption(currentData, previousData) {
    const formattedCurrentData = formatChartData(currentData)
    const formattedPreviousData = formatChartData(previousData)

    console.log(formattedCurrentData, formattedPreviousData);

    if (!formattedCurrentData.length && !formattedPreviousData.length) {
        chartOption.value = {}
        return
    }

    chartOption.value = {
        title: t('date.title.daily'),
        xAxisData: formattedCurrentData.map(item => item.time),
        series: [
            {
                name: t('date.label.dayBefore'),
                data: formattedPreviousData.map(item => item.value),
                type: props.chartType,
                showExtremum: true
            },
            {
                name: t('date.label.yesterday'),
                data: formattedCurrentData.map(item => item.value),
                type: props.chartType,
                showExtremum: true
            }
        ],
        customColors: ['#d7ebff', '#409EFF'],
        showMarkLine: true,
        showZoom: true,
        grid: {
            top: '10%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
        }
    }
}
</script>

<style scoped>
.chart-wrapper {
    width: 100%;
    height: 100%;
}

:deep(.echarts-wrapper) {
    flex: 1;
    min-height: 0;
    /* 重要：防止 flex 子项溢出 */
}
</style>